<template>
  <div class="add-good">
    <bread-crumb
      :path="{ path: '/home' }"
      :titles="['首页', '商品管理', '添加商品']"
    ></bread-crumb>
    <el-card>
      <el-alert title="消息提示" type="info" center show-icon></el-alert>
      <!-- 步骤条 -->
      <el-steps :space="200" :active="activeIndex - 0">
        <el-step v-for="item in labels" :key="item" :title="item"></el-step>
        <el-step title="完成"></el-step>
      </el-steps>
      <good-tabs
        :activeIndex.sync="activeIndex"
        :labels="labels"
        :formData="formData"
        :formRules="formRules"
        :casData="cateList"
        :casProps="casProps"
      ></good-tabs>
    </el-card>
  </div>
</template>

<script>
import GoodTabs from "../goodsChildren/GoodTabs";
import BreadCrumb from "@/components/BreadCrumb";
export default {
  name: "AddGood",
  data() {
    return {
      activeIndex: "0",
      labels: ["基本信息", "商品参数", "商品属性", "商品图片", "商品内容"],
      formData: {
        goods_name: "",
        goods_price: 0,
        goods_weight: 0,
        goods_number: 0,
        selectedCates: [],
        goods_introduce: "",
        pics: [] //图片
      },
      formRules: {
        goods_name: [
          { required: true, message: "必须输入字符", trigger: "blur" }
        ],
        goods_price: [
          { required: true, message: "必须输入字符", trigger: "blur" }
        ],
        goods_weight: [
          { required: true, message: "必须输入字符", trigger: "blur" }
        ],
        goods_number: [
          { required: true, message: "必须输入字符", trigger: "blur" }
        ],
        goods_cat: [
          { required: true, message: "必须输入字符", trigger: "blur" }
        ]
      },
      cateList: [],
      casProps: {
        label: "cat_name",
        value: "cat_id",
        children: "children",
        expandTrigger: "hover"
      }
    };
  },
  created() {
    this.getCateList();
  },
  methods: {
    handleNes(i) {
      this.activeIndex = i;
    },
    getCateList() {
      this.$http
        .get("categories")
        .then(res => {
          if (res.data.meta.status == 200) {
            // this.$message.success('获取商品列表成功');
            this.cateList = res.data.data;
            // console.log(this.cateList);
          } else {
            this.$message.error("获取失败");
          }
        })
        .catch(err => err);
    }
  },
  components: {
    BreadCrumb,
    GoodTabs
  }
};
</script>

<style lang="scss" scoped>
.el-alert {
  margin-bottom: 10px;
}
</style>
